<template>
	<view class="qiun-columns my_page">
	
			<view class="select-box"><sun-dropDown  v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown></view>

			<view class="dates-box ">
				<view class="dates f-row-between">
					<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" 
					 :class="selected == 'd' ? 'selected' : ''" @click="selected = 'd'">
						日
					</view>
					<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }"
					 :class="selected == 'mz' ? 'selected' : ''" @click="selected ='mz'">
						周
					</view>
					<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }"
					 :class="selected == 'm' ? 'selected' : ''" @click="selected ='m'">
						月
					</view>
					<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" 
					 :class="selected == 'y' ? 'selected' : ''" @click="selected = 'y'">
						年
					</view>
				</view>
				<uni-superDates :dateTypes="['d', 'mz', 'm', 'y']" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
			</view>
			<view class="chart-box">
				<view class="money-block f-center">
					<!-- 排名 -->
					<view class="money-item f-column-WHcenter" :style="{ backgroundImage: resData.total.backgroundImage }">
						<label class="label icons iconguanjunbangbiaozhi"></label>
						<view class="money f-row-Wcenter">
							<label>￥</label>
							<label>{{ resData.total.numder }}</label>
							<label class="unit" v-if="resData.total.sourceNumder > 1000 && -1000 < resData.total.sourceNumder">{{ resData.total.unit }}</label>
						</view>
						<view>
							<label class="title">{{ resData.total.branch_name }}</label>
						</view>
					</view>
				</view>  
			</view>
			<view class="retailDetails-box f-column">
				<view class="sun-tietleBox">
					<sun-tietleBox  :tietleData="'门店排名'">
					</sun-tietleBox>
				</view>
				 <view :id="idTopHeight" class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}">
					<!-- height="600rpx" -->
					<wyb-table
						ref="table"
						:width="'710rpx'"
						:defaultColWidth="defaultColWidth"
						:headers="headers"
						:contents="resData.list"
						:header-bg-color="'#128A80'"
						:header-ft-color="'#ffffff'"
						:loading="false"
						:first-line-fixed="false"
						:maxHeight="topHeight - (tableMargin * 2) +'rpx'"
						:url-col="urlCol"
						:min-height="[65,50]"
					/>
				</view>
			</view>
	</view>
</template>

<script>
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
import api_server from '@/api/api_server.js';

import wybTable from '@/components/wyb-table/wyb-table.vue';
export default {
	components: {
		sunTietleBox,
		wybTable,
		sunDropDown
	},
	data() {
		return {
			//平分表宽
			defaultColWidth:167,
			dateTypes :['d','mz','m','y'],
			selected: 'mz',
			//日期轮播
			background: ['color1', 'color2', 'color3'],
			
		

			//图表数据 取resData.list中的列数据
			chartData: {
				categories: [],
				series: {}
			},
			//定义头部字段
			headers: [
				{
					label: '机构名称',
					key: 'branch_name',
					width:230,
					widthInit: 230
				},
				{
					label: '营业额',
					key: 'sale_amt',
				},
				{
					label: '毛利额',
					key: 'ml_amt'
				},
				{
					label: '毛利率',
					key: 'ml_rate'
				}
			],
			//源数据
			resData: {
				//汇总数据
				total: {
					branch_name:''
				},
				list: [
					{
						branch_jg: '', //string 机构编号
						branch_name: '', //string 机构名称
						sale_amt: '', // numeric(10,2) 营业额
						ml_amt: '', //numeric(10,2) 毛利额
						ml_rate: '' //numeric(10,2) 毛利率
					}
				]
			},
			contents: [],

			urlCol: [
				{
					type: 'route',
					key: 'url'
				},
				{
					type: 'http',
					key: 'link'
				}
			],
			//查询query.dateSelect时间段
			query: {
				dateType: 'mz',
				dateSelect: [],
				anatype: 1, //分析周期 1、按周 2、按月 3、按年
				tottype: 1, //数据类型 1、全部 2、线上 3、线下
				branch_jg: '%', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000
			},
			fromData: {
				version: '1',
				pageNo: 1,
				onePageNum: 10
			},
			//表格高度变量
			idTopHeight : 'table-box',
			tableMargin :20,
			topHeight :100
		};
	},
	onLoad() {
		
	},

	computed: {
		userInfo() {
			var userInfo = this.$store.getters.getUserInfo;
			return userInfo;
		}
	},
	onReady() {
		this.$nextTick(() => {
			this.onSubmitSend();
			//渲染数据
			//this.onChartDataType();
		});
		this.$util.getTopHeight(this,this.idTopHeight,this.tableMargin);
	},
	methods: {
		
		//时间回调
		onSubmitSend() {
			this.$emit('onSubmitSend', false);
		},
		//处理反馈
		onSubmit(dates) {
			console.log('onSubmit>>>', dates);
			if (dates) {
				//清除旧数据
				this.resData.list = [];
				this.query ={...this.query,...dates} ;
			
				this.login();
			}
		},
		login() {
			if (!this.query.branch_jg != '') {
				this.query.branch_name = this.userInfo.branch_name;
				this.query.branch_jg = this.userInfo.branch_default;
			}
			let query = this.query;
			query = { ...this.fromData, Params: query };
			api_server.dwzy_GetAppSaleBranchAnalysisList({
				data: query,
				success: res => {
					if (res.data.data) {
						this.resData.list = [];
						this.resData.total = [];
						this.resData.list = res.data.data;
						this.resData.list.forEach(item =>{
						     item.ml_rate =item.ml_rate + '%';
						})
						//取第一条 排名第一
						this.resData.total = { ...this.resData.total, ...this.resData.list[0] };
						let numberobj = this.$util.moneyUnit(this.resData.total.sale_amt);
						this.resData.total = { ...this.resData.total, ...numberobj };
						
						
						this.$util.getDefaultColWidth(this,710,'headers','defaultColWidth');
					}
				},
				fail(error) {
					console.log('error', error);
				}
			});
		},
		onSubmitAddress(e) {
			this.query.branch_jg = e.address.branch_no;
			this.query.branch_name = e.address.branch_name;
			this.login();
		}
	}
};
</script>

<style scoped lang="scss">
.select-box {
	margin: 0 30upx;
}

.dates-box {
	background-color: #fcfdfd;
	padding: 20upx 30upx 0 30upx;
	border-radius: 15upx 15upx 0 0;
}

.chart-box {
	//height: 600upx;
	border-radius: 0 0 15upx 15upx;
	padding: 0 20upx 20upx 20upx;
	background-color: #fcfdfd;
	.money-block {
		width: 100%;
		padding-top: 20upx;
		border-top: 1rpx solid #d7d7d7;

		.money-item {
			width: 100%;
			height: 200upx;
			border-radius: 10upx;
			box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);
			.label {
				height: 90upx;
				font-size: 90upx;
			
				line-height: 90upx;
			}
			.money {
				width: 100%;
				height: 50upx;
			}
			label:nth-of-type(1) {
				height: 30upx;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fcfdfd;
				line-height: 62upx;
			}

			label:nth-of-type(2) {
				height: 38upx;
				font-size: 40upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #fcfdfd;
			}
			.unit {
				height: 38upx;
				font-size: 40upx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #fcfdfd;
			}
			.title {
				height: 24upx;
				font-size: 20upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fcfdfd;
			}
		}

		.money-item:nth-of-type(1) {
			background-color: red;
			.label {
				height: 90upx;
				font-size: 80upx;
				line-height: 90upx;
			}
			background-image: linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1));
		}
	}

	}

.retailDetails-box {
	border-radius: 15upx;
	background-color: #fcfdfd;
	margin-top: 25upx;
	//控制组件的缩进（外边距）
	.sun-tietleBox{
		margin: 0 20upx;
		//slot class 当前页面的样式
	}
	
}
</style>
